<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel=stylesheet href="css/jquery.calendarPicker.css" type="text/css" media="screen">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.calendarPicker.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>


<link rel="stylesheet" type="text/css" href="css/flexigrid.css">
<script type="text/javascript" src="js/flexigrid.js"></script>
<title>查询页面 http://flexigrid.info/</title>
</head>
<body>
	<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#616D7E">
		<tr>
			<td style="width: 120px">查询开始日期</td>
			<td style="width: 140px"><span id="start" /></td>
			<td style="width: 120px">查询结束日期</td>
			<td style="width: 140px"><span id="end" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<div id="startDiv" style="width: 200px"></div>
			</td>
			<td colspan="2">
				<div id="endDiv" style="width: 200px"></div>
			</td>
		</tr>
	</table>
	<input class="sumbit" type="button" value="查询">

	<table id="flex1" style="display: none"></table>
	<script type="text/javascript">
	jQuery(function() {
		jQuery('.sumbit').click(function() {	
			var address='newAjax?startTime='+jQuery("#start").html()+'&endTime='+jQuery("#end").html();
			jQuery("#flex1").flexigrid
			(
			{
			url: address,
			dataType: 'json',
			colModel : [
				{display: 'keyword', name : 'keyword', width : 123, sortable : true, align: 'center'},
				{display: 'sessionDuration', name : 'sessionDuration', width : 123, sortable : true, align: 'left'},
				{display: 'pageView', name : 'pageView', width : 123, sortable : true, align: 'left'},
				{display: 'registrations', name : 'registrations', width : 123, sortable : true, align: 'center'},
				{display: 'numberOfOrder', name : 'numberOfOrder', width : 123, sortable : true, align: 'left'},
				{display: 'orderExtRetail', name : 'orderExtRetail', width : 123, sortable : true, align: 'left'},
				{display: 'impression', name : 'impression', width : 123, sortable : true, align: 'right'},
				{display: 'click', name : 'click', width : 123},
				{display: 'cost', name : 'cost', width : 123},
				{display: 'ctr', name : 'ctr', width : 123},
				{display: 'cpc', name : 'cpc', width : 123},
				{display: 'roas', name : 'roas', width : 123},
				{display: 'epg', name : 'epg', width : 123},
				{display: 'revPerOrder', name : 'revPerOrder', width : 123}
			],	
			searchitems : [
				{display: 'keyword', name : 'keyword'},
				{display: 'sessionDuration', name : 'sessionDuration', isdefault: true}
			],
			sortname: "sessionDuration",
			sortorder: "asc",
			usepager: true,
			title: 'New Test',
			useRp: true,
			rp: 10,
			showTableToggleBtn: true,
			width: 700,
			height: 200,
			pagestat: '显示 {from} 到 {to} 条， 共{total}条记录',
			procmsg: '正在获取数据，请稍候 ...'
			}
			);
			
			function test(com,grid)
			{
				if (com=='Delete')
					{
						confirm('Delete ' + $('.trSelected',grid).length + ' items?')
					}
				else if (com=='Add')
					{
						alert('Add New Item');
					}			
			}
		});
	});		
 
	var startCalendarPicker = jQuery("#startDiv").calendarPicker({
		years : 1,
		months : 2,
		days : 3,
		showDayArrows : false,
		callback : function(cal) {
			jQuery("#start").html(cal.currentDate.toISOString());
		}
	});

	var endCalendarPicker = jQuery("#endDiv").calendarPicker({
		years : 1,
		months : 2,
		days : 3,
		showDayArrows : false,
		callback : function(cal) {
			jQuery("#end").html(cal.currentDate.toISOString());
		}
	});	
	</script>
</body>
</html>